<div nz-row style="margin-bottom: 15px;">
  <div nz-col [nzSpan]="8">
    <nz-input [nzType]="'search'" [nzPlaceHolder]="'请输入机构名称'" (search)="handleSearch()" [(ngModel)]="orgName"></nz-input>
  </div>
  <div nz-col [nzSpan]="8" [nzOffset]="8">
    <button nz-button [nzType]="'primary'" style="float: right;" (click)="showModal()">
      <i class="anticon anticon-save"></i><span>新增</span>
    </button>
  </div>
</div>

<nz-table #nzTable [nzDataSource]="data" [nzPageSize]="10">
  <thead nz-thead>
  <tr>
    <th nz-th [nzWidth]="'20%'"><span>机构名称</span></th>
    <th nz-th [nzWidth]="'20%'"><span>父级机构名称</span></th>
    <th nz-th [nzWidth]="'20%'"><span>描述</span></th>
    <th nz-th><span>操作</span></th>
  </tr>
  </thead>
  <tbody nz-tbody>
  <ng-template ngFor let-data [ngForOf]="nzTable.data">
    <ng-template ngFor let-item [ngForOf]="expandDataCache[data.key]">
      <tr nz-tbody-tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
        <td nz-td>
          <nz-row-indent [nzIndentSize]="item.level"></nz-row-indent>
          <nz-row-expand-icon [(nzExpand)]="item.expand" (nzExpandChange)="collapse(expandDataCache[data.key],item,$event)" [nzShowExpand]="!item.children"></nz-row-expand-icon>
          {{item.name}}
        </td>
        <td nz-td>{{item.parentName}}</td>
        <td nz-td>{{item.desc}}</td>
        <td nz-td>
          <button nz-button (click)="showModal(item)">
            <i class="anticon anticon-edit"></i><span>编辑</span>
          </button>
          <button nz-button (click)="handleDelete(item.id)">
            <i class="anticon anticon-delete"></i><span>删除</span>
          </button>
        </td>
      </tr>
    </ng-template>
  </ng-template>
  </tbody>
</nz-table>

<nz-modal [nzVisible]="isVisible" [nzTitle]="'第一个 Modal'" [nzContent]="modalContent" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)">
  <ng-template #modalContent>
    模态框，放表单
  </ng-template>
</nz-modal>
